<template>
  <div>
    <!-- el-tree 是树形组件, 只需要传入
    节点数组作为 data 即可 -->
    <!-- props 是个对象, 如果字段名不叫 label 或 children 可以用来改名 -->
    <!-- default-expand-all 可以设置默认展开所有节点 -->
    <el-tree
      :data="depts"
      :props="{label:'name'}"
      :default-expand-all="true"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 轻重重要的字段有两个 label 节点名, children 子节点的数组
      // 每一层子节点数组的结构都是一样(也有 label 和 children)
      depts: [
        { name: '总裁办' },
        { name: '市场部' },
        { name: '技术部', children: [
          { name: '前端开发' },
          { name: '后端开发' }
        ] },
        { name: '人事部' }
      ]
    }
  }
}
</script>

<style>

</style>
